<template>
  <view class="container">
    <view class="work_types">
      <view class="subsection"><ve-subsection :list="typeList" activeColor="#3072F6" :current="currentTab" @change="topTabsClick" /></view>
      <ve-tabs v-if="topTabsIndex == 2" :actived="tabIndex" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>
    <!-- 工单信息 -->
    <block v-if="topTabsIndex == 0">
      <view class="viewports">
        <ve-card :title="record.workCode" type="none" :fold="true" style="margin-top: 0" v-model:initFold="inspectionFold">
          <template #forever-show="{ contentIsShow }">
            <ve-cell label="工单类型">{{ record.workTypeName || '-' }}</ve-cell>
            <ve-cell label="工单负责人">{{ record.workOperatorName || '-' }}</ve-cell>
          </template>
          <ve-cell label="工单状态">{{ record.statusName || '-' }}</ve-cell>
          <ve-cell label="归属门店">{{ record.siteName || '-' }}</ve-cell>
          <ve-cell label="工单指派人">{{ record.workCompleteUser || '-' }}</ve-cell>
          <ve-cell label="工单预计完成时间">{{ record.expectEndTime || '-' }}</ve-cell>
          <ve-cell label="工单实际开始时间">{{ record.startTime || '-' }}</ve-cell>
          <ve-cell label="工单实际完成时间">{{ record.endTime || '-' }}</ve-cell>
          <ve-cell label="是否开启车管家调度模式">{{ record.isHousekeep == 0 ? '否' : '是' }}</ve-cell>
        </ve-card>
        <ve-card title="操作流程" type="none" style="margin-top: 0">
          <block v-if="record.operationsLogList && record.operationsLogList.length">
            <view style="padding: 24rpx 0" v-for="(item, index) in record.operationsLogList" :key="index">
              <view class="action-t">
                <view class="action-d"></view>
                <view class="action-n">{{ item.operationsTypeName || '-' }}</view>
              </view>
              <view class="action-border">
                <view class="action-border-i">
                  <view class="i-l">操作时间：</view>
                  <view class="i-r">{{ item.createTime || '-' }}</view>
                </view>

                <view class="action-border-i">
                  <view class="i-l">操作人：</view>
                  <view class="i-r">{{ item.createUserName || '-' }}</view>
                </view>

                <view class="action-border-i">
                  <view class="i-l">操作内容：</view>
                  <view :class="['i-r', item.check ? 'i-r-overflow' : '']">{{ item.operationsContent || '-' }}</view>
                </view>
                <view class="action-border-i" v-if="item.operationsContent && item.operationsContent.length > 40">
                  <view class="i-l"></view>
                  <view class="i-r" @click="openCon(item)">
                    <block v-if="item.check">
                      <span class="isopen">展开</span>
                      <image class="isopen-img" src="../../../../static/icons/arrow_bottom_1.png" mode="widthFix"></image>
                    </block>
                    <block v-else>
                      <span class="isopen">收起</span>
                      <image class="isopen-img" src="../../../../static/icons/arrow_top_1.png" mode="widthFix"></image>
                    </block>
                  </view>
                </view>
                <!-- <view class="action-border-i">
                  <view class="i-l"></view>
                  <view class="i-r" style="color: #3072F6;" @click="toMore(item.operationsContent)">查看更多</view>
                </view> -->
                <block>
                  <view class="action-border-i" v-if="item.showRemarkFlag == 1">
                    <view class="i-l">备注：</view>
                    <view class="i-r">{{ item.remark || '-' }}</view>
                  </view>
                  <view class="action-border-i" v-if="item.remark && item.remark.length > 40">
                    <view class="i-l"></view>
                    <view class="i-r" style="color: #3072f6" @click="toMore(item.remark)">查看更多</view>
                  </view>
                </block>
              </view>
            </view>
          </block>
          <block v-else>
            <ve-empty text="暂无数据"></ve-empty>
            <view style="height: 80rpx; width: 100%"></view>
          </block>
        </ve-card>
      </view>
    </block>
    <!-- 工单产生的运营成本 -->
    <block v-if="topTabsIndex == 1">
      <view class="viewports">
        <block v-if="recordCostList && recordCostList.length">
          <ve-card
            :title="'支出单号 ' + (recordCost.code || '-')"
            type="none"
            :fold="true"
            style="margin-top: 0"
            v-for="(recordCost, index) in recordCostList"
            :key="index"
          >
            <ve-cell label="支出单类型">{{ recordCost.costTypeName || '-' }}</ve-cell>
            <template #forever-show="{ contentIsShow }">
              <ve-cell label="支出总额">{{ recordCost.amount || '-' }}元</ve-cell>
            </template>
            <ve-cell label="支出费项及金额(元)">
              <view>
                <view v-for="(i, indexi) in recordCost.feeList" :key="indexi">{{ i.itemName }} {{ i.amount ? i.amount : 0 }}元</view>
              </view>
            </ve-cell>
            <ve-cell label="车辆信息">
              <view class="checkFlow">
                <view v-for="(item, indexi) in recordCost.feeList" :key="indexi">
                  {{ item.carId ? `${item.licenseNo} ${item.carModel}` : '-' }}
                </view>
              </view>
            </ve-cell>
            <ve-cell label="申请人">{{ recordCost.applyStaffName || '-' }}</ve-cell>
            <ve-cell label="审批流">
              <view v-for="(i, indexi) in recordCost.checkFlowList" :key="indexi"
                >{{ i.staffName }}<span v-if="recordCost.checkFlowList && indexi + 1 != recordCost.checkFlowList.length">-</span></view
              >
            </ve-cell>
            <ve-cell label="申请时间">{{ recordCost.applyTime || '-' }}</ve-cell>
            <ve-cell label="审批状态">{{ recordCost.checkStatusName || '-' }}</ve-cell>
            <ve-cell label="付款状态">{{ recordCost.payStatusName || '-' }}</ve-cell>
            <ve-cell label="付款时间">{{ recordCost.payTime || '-' }}</ve-cell>
            <ve-cell label="申请备注">{{ recordCost.remark || '-' }}</ve-cell>
          </ve-card>
        </block>
        <block v-else>
          <ve-empty text="暂无数据"></ve-empty>
        </block>
      </view>
    </block>
    <!-- 关联订单信息 -->
    <block v-if="topTabsIndex == 2">
      <!-- 短租 -->
      <view class="order-port" v-if="orderType == 1">
        <!-- 订单详情 -->
        <shortOrderdetail :orderId="orderId" v-if="tabIndex == 0" />
        <!-- 费用记录 -->
        <shortOrderExpense :orderId="orderId" v-else-if="tabIndex == 1" />
        <!-- 换车记录 -->
        <shortOrderVehicle :orderId="orderId" v-else-if="tabIndex == 2" />
      </view>
      <!-- 长租 -->
      <view class="order-port" v-if="orderType == 2">
        <!-- 订单详情 -->
        <longOrderdetail :orderId="orderId" v-if="tabIndex == 0" />
        <!-- 费用记录 -->
        <longOrderExpense :orderId="orderId" v-else-if="tabIndex == 1" />
        <!-- 换车记录 -->
        <longOrderVehicle :orderId="orderId" v-else-if="tabIndex == 2" />
      </view>
      <!-- 合同记录 -->
      <contract
        permission-prefix="svmsapp:workOrder.signOrder"
        :orderId="orderId"
        :contractIndex="contractIndex"
        :orderType="orderType == 1 ? 2 : 3"
        v-if="tabIndex == 3"
      />
    </block>
    <!-- </view> -->
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { detailAPI } from '@/api/order/workOrder'
  import { reactive, ref } from 'vue'
  import { getCostListAPI } from '@/api/order/workOrder'
  import contract from '@/pages/order/components/detail/contract.vue'

  import shortOrderdetail from './components/shortOrder/orderdetail.vue'
  import longOrderdetail from './components/longOrder/orderdetail.vue'

  import shortOrderExpense from './components/shortOrder/expense.vue'
  import longOrderExpense from './components/longOrder/expense.vue'

  import shortOrderVehicle from './components/shortOrder/vehicle.vue'
  import longOrderVehicle from './components/longOrder/vehicle.vue'

  import { usePermission } from '@/hooks/usePermission'

  const record = ref({})
  const recordCostList = ref({}) //订单产生的运营成本
  const orderId = ref(null)
  const orderType = ref(null)
  const workCode = ref(null)
  const workOrderId = ref(null)
  const status = ref(null)
  // 顶部菜单栏光标
  const currentTab = ref(0)
  const topTabsIndex = ref(0)
  const inspectionFold = ref(false)
  const typeList = ref([
    {
      name: '工单信息',
    },
    {
      name: '工单的运营成本',
    },
    {
      name: '关联订单信息',
    },
  ])
  const topTabsClick = (i) => {
    topTabsIndex.value = i
  }

  const toMore = (e) => {
    uni.showModal({
      content: e,
      showCancel: false,
    })
  }

  const tabs = reactive(['订单详情', '费用信息', '换车记录'])

  let tabIndex = ref(0)
  let contractIndex = ref(0)
  const tabsChange = (e) => {
    tabIndex.value = e
  }

  onLoad((option) => {
    console.log(option.workOrderId)
    if (option.workOrderId) {
      workOrderId.value = option.workOrderId
      getDetail(option.workOrderId)
    }
    if (option.workCode) {
      workCode.value = option.workCode
      getCostList(option.workCode)
    }
    if (option.orderId) {
      orderId.value = option.orderId
    }
    if (option.orderType) {
      orderType.value = option.orderType
    }
    // 根据tab跳转
    if (option.tab) {
      topTabsClick(option.tab)
      currentTab.value = option.tab
    }
    // 跳转关联订单信息下的tab
    if (option.associationorderTab) {
      tabsChange(option.associationorderTab)
    }
    // 跳转关联订单信息下合同记录的tab
    if (option.contractIndex != '') {
      contractIndex.value = option.contractIndex
    }
    if (option.status != '') {
      // 合同记录tab 根据权限判断
      status.value = Number(option.status)
      usePermission('svmsapp:workOrder.signOrder') && [3, 4, 5].includes(status.value) && tabs.push('合同记录')
    }
  })

  const getDetail = async (id) => {
    const res = await detailAPI({ id: id })
    if (res.code === 200) {
      var result = res.result
      if (result.operationsLogList && result.operationsLogList.length) {
        result.operationsLogList.forEach((i) => {
          i.check = true
        })
      }
      record.value = result
    }
  }
  const getCostList = async (code) => {
    const res = await getCostListAPI({ workCode: workCode.value, pageNumber: 1, pageSize: 9999 })
    if (res.code === 200) {
      recordCostList.value = res.result.data
    }
  }
  const openCon = (item) => {
    console.log(item)
    record.value.operationsLogList.forEach((i) => {
      if (i.id == item.id) {
        i.check = !i.check
      }
      console.log(i.check)
    })
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    background: #f7f8fa;
  }
  .viewports {
    padding: 24rpx;
    padding-top: 164rpx;
  }
  .work_types {
    border-top: 1px solid #f7f8fa;
    height: 134rpx;
    width: 100%;
    background: #fff;
    position: fixed;
    // top: 0;
    // left: 0;
    z-index: 999;
    .subsection {
      margin: 24rpx;
    }
  }

  .types_i {
    width: calc(100% - 64rpx);
    margin: 32rpx;
    height: 72rpx;
    background: #f7f8fa;
    border-radius: 4rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ve-search {
    border-top: 0 !important;
  }

  .types_i_label {
    position: relative;
    text-align: center;
    font-size: 28rpx;
    color: #55585f;
    font-weight: 400;
    padding: 34rpx;
  }

  .types_i_label_back {
    position: absolute;
    width: 168rpx;
    height: 56rpx;
    background: #fff;
    border-radius: 4rpx;
  }

  .top_tabs_active {
    color: #3072f6;
    font-weight: 600;
  }
  .action-t {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .action-d {
      width: 14rpx;
      height: 14rpx;
      background: #3072f6;
      border-radius: 50%;
    }
    .action-n {
      color: #3072f6;
      font-size: 30rpx;
      font-weight: 600;
      margin-left: 24rpx;
    }
  }
  .action-border {
    border-left: 2rpx solid #f4f4f4;
    padding-bottom: 16rpx;
    margin-left: 6rpx;
    .action-border-i {
      margin: 16rpx 0 0 30rpx;
      color: #8491a8;
      font-size: 30rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .i-l {
        width: 160rpx;
      }
      .i-r {
        flex: 1;
        .isopen {
          color: #3072f6;
          font-size: 30rpx;
          font-weight: 400;
          margin-right: 12rpx;
        }
        .isopen-img {
          width: 28rpx;
          height: 28rpx;
        }
      }
      .i-r-overflow {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .toptab {
    border-top: 1px solid #f7f8fa;
    position: fixed;
    top: 134rpx;
    width: 100%;
    left: 0;
    z-index: 999;
  }
  .order-port {
    margin-top: 220rpx;
  }

  .checkFlow {
    display: flex;
    flex-direction: column;
  }
</style>
